// hooks之useReducer
import UseReducerApp from './components/useReducer';
// hooks之useMemo
import UseMemoApp from './components/useMemo';
// hooks之useCallback
import UseCallbackApp from './components/useCallback';
// hooks之React.Memo
import ReactMemoApp from './components/reactMemo';
// hooks之forwardRef
import ForwardRefApp from './components/forwardRef';
// hooks之useImperativeHandle
import UseImperativeHandleApp from './components/useImperativeHandle';
import './App.css';
import { create } from 'zustand';
import { useEffect } from 'react';
const URL = 'http://geek.itheima.net/v1_0/channels'
// zustand使用
// 1、创建store
const useStore = create((set)=>{
  // create函数必须返回一个对象，对象内部是状态数据和修改状态的方法
  return {
    // 状态数据
    count: 0,
    // 修改状态的方法：
    // set语法1：参数是函数 适用于需要用到老数据的情况
    inc: ()=>{
      set((state)=>({count: state.count + 1}))
    },
    // set语法2：参数是对象 适用于不需要用到老数据的情况
    // 不需要基于老数据，因此set中直接返回对象即可
    incByValue: ()=>{
      set({count: 0})
    },
    // 在异步请求中使用zustand:
    channelList: [],
    fetchChannelList: async ()=>{
      const res = await fetch(URL)
      const data = await res.json()
      set({channelList: data.data.channels})
      console.log(data, 'data==')
    }
  }
})
function App() {
  // 绑定store到组件
  const {count, inc, incByValue, channelList, fetchChannelList} = useStore()
  useEffect(()=>{
    fetchChannelList()
  }, [fetchChannelList])
  return (
    <div className="App">
      <UseReducerApp />
      <UseMemoApp />
      <UseCallbackApp />
      <ReactMemoApp />
      <ForwardRefApp />
      <UseImperativeHandleApp />
      <h1>通过zustand缓存的count值为{count}</h1>
      <button onClick={inc}>count值+1</button>
      <button onClick={incByValue}>count值归零</button>
      <ul>
        {
          channelList.map((item, index)=>{
            return <li key={item.id}>{item.name}</li>
          })
        }
      </ul>
    </div>
  );
}

export default App;
